<template>
  <div class="containerPar">
    <title>剪贴图片</title>
    <input type="file" @change="inputChange" />
    <img :src="src" alt="" ref="img" />
    <el-button @click="cut">剪贴</el-button>
    <el-button @click="down">下载</el-button>
    <div class="cover" v-if="show" @click="outSide">
      <div
        ref="drag"
        class="content"
        :style="{ top: curTop + 'px', left: curleft + 'px' }"
        @mousedown="mouseDown"
      ></div>
    </div>
    <canvas ref="canvas" width="200" height="200"></canvas>
  </div>
</template>

<script>
export default {
  data() {
    return {
      src: "",
      show: false,
      curTop: 0,
      curleft: 0,
      leftSpace: null,
      topSpace: null,
      mark:false
    };
  },
  methods: {
    outSide() {
      if(this.mark){
        this.mark = false
        return
      }
      this.show = false;
    },
    inputChange(e) {
      let file = e.target.files[0];
      let fileReader = new FileReader();
      fileReader.readAsDataURL(file);
      fileReader.onload = () => {
        this.src = fileReader.result;
      };
    },
    cut() {
      this.show = true;
      let imgContent = this.$refs.img.getBoundingClientRect();
      this.curleft = imgContent.left;
      this.curTop = imgContent.top;
    },
    down() {
      this.$refs.canvas.toBlob((res) => {
        console.log(res);
      }, "image/jpeg");
    },
    mouseDown(e) {
      this.mark = true
      // 计算鼠标在自己哪个位置
      let dragContent = this.$refs.drag.getBoundingClientRect();
      this.leftSpace = e.clientX - dragContent.left;
      this.topSpace = e.clientY - dragContent.top;
      window.addEventListener("mousemove", this.mouseover);
      window.addEventListener("mouseup", this.mouseup);
    },
    mouseover(event) {
      //计算极致距离
      let imgContent = this.$refs.img.getBoundingClientRect();
      let dragContent = this.$refs.drag.getBoundingClientRect();
      let left = event.clientX - this.leftSpace;
      let top = event.clientY - this.topSpace;
      if (left < imgContent.left) {
        this.curleft = imgContent.left;
      } else if (
        left >
        imgContent.left + imgContent.width - dragContent.width
      ) {
        this.curleft = imgContent.left + imgContent.width - dragContent.width;
      } else {
        this.curleft = left;
      }
      if (top < imgContent.top) {
        this.curTop = imgContent.top;
      } else if (
        top >
        imgContent.top + imgContent.height - dragContent.height
      ) {
        this.curTop = imgContent.top + imgContent.height - dragContent.height;
      } else {
        this.curTop = top;
      }
    },
    mouseup(event) {
      let imgContent = this.$refs.img.getBoundingClientRect();
      let dragContent = this.$refs.drag.getBoundingClientRect();
      let left = dragContent.left - imgContent.left;
      let top = dragContent.top - imgContent.top;
      this.showCanvas(left, top);
      window.removeEventListener("mousemove", this.mouseover);
      window.removeEventListener("mouseup", this.mouseup);
    },
    showCanvas(left, top) {
      let Img = this.$refs.img;
      let ctx = this.$refs.canvas.getContext("2d");
      //要计算目前剪切的宽度占据img的比列 乘 图片的真正的宽度,得到实际剪切图片的宽度
      let cutLeft = Math.floor((left / Img.width) * Img.naturalWidth); 
      let cutTop = Math.floor((top / Img.height) * Img.naturalHeight);
      let cutWidth = Math.floor((100 / Img.width) * Img.naturalWidth);
      let cutHeight = Math.floor((100 / Img.height) * Img.naturalHeight);
      console.log(cutWidth, cutHeight);
      ctx.drawImage(
        Img,
        cutLeft,
        cutTop,
        cutWidth,
        cutHeight,
        0,
        0,
        this.$refs.canvas.width,
        this.$refs.canvas.height
      );
    },
  },
};
</script>

<style lang='less' scoped>
img {
  width: 600px;
  height: 600px;
}
.containerPar {
  width: 100%;
  height: 100%;
}
.cover {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
}
.content {
  width: 100px;
  height: 100px;
  position: fixed;
  border: 1px solid red;
  box-sizing: border-box;
  position: absolute;
}
</style>